<template>
  <div class="myAddress-container">
      <my-header class="myHeader" title="我的收货地址" titleRight="新增地址" fixed @onClickRight="$router.push('/newAddress')" @onClickLeft="$router.push('/my')"></my-header>
      <div class="address-box" v-for="(item,i) in addressList" :key="i">
          <div class="address-left">
              <div class="address-title">{{item.consignee[0].address}}</div>
              <div class="address-post">{{item.consignee[0].homeNum}}</div>
              <div class="address-info">
                  <address class="username">
                      <div class="name">{{item.consignee[0].name}}</div>
                      <div class="mrs">{{item.consignee[0].gender===0?'(女士)':'(先生)'}}</div>
                  </address>
                  <address class="mobile">{{item.consignee[0].mobile}}</address>
              </div>
          </div>
          <div class="address-sure" v-show="item.consignee[0].defaultAddress">默认地址</div>
          <div class="address-right" @click="gotoEditAddress(item.consignee[0], i)">
              编辑
          </div>
      </div>
  </div>
</template>

<script>
import MyHeader from '../components/my-header.vue'
import { address } from '../../../api/address.js'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'myAddressIndex',
  components: {
    MyHeader
  },
  computed: {
    ...mapState('m_my', ['myAddress'])
  },
  props: {},
  data () {
    return {
      addressList: {}
    }
  },
  watch: {},
  created () {
    this.getAddressInfo()
    this.addressList = this.myAddress
  },
  mounted () {

  },
  methods: {
    ...mapMutations('m_my', ['addMyAddress', 'saveEditAddress', 'saveDeleteAddress']),
    // 引入存储数据的方法
    // 获取数据
    async getAddressInfo () {
      try {
        const { data: res } = await address()
        this.addressList = res
        // console.log(res)
        this.addMyAddress(res)
      } catch (error) {
        this.$toast('获取数据失败！')
      }
    },
    // 传送到编辑地址路由
    gotoEditAddress (e, i) {
      // console.log(e)
      this.saveEditAddress(e)
      this.saveDeleteAddress(i)
      // console.log(i)
      this.$router.push('/editAddress')
    }
  }
}
</script>

<style scoped lang="less">
.address-box {
  margin-top: 5px;
  border-bottom: 2px solid #02b6fd;
  display: flex;
  justify-content: space-between;
  font-size: 32px;
  align-items: center;
  padding: 25px;
    .address-left {
      .address-info{
        display: flex;
        .username{
          font-style: normal;
          display: flex;
        .mrs{
          margin-left: 15px;
        }
        }
        .mobile{
          margin: 5px 25px;
        }
      }
    }
    .address-sure {
      color: #6057ff;
    }
    .address-right{
      color: #0050ea;
    }
}
.address-title {
  color: #f00000;
}
</style>
